<!--
  登录选择页面 - 新的统一登录入口
  用户在此页面选择登录方式：
  - 普通用户登录 -> /auth/login
  - 管理员登录 -> /auth/admin-login
-->
<template>
  <div class="login-choice-container">
    <div class="choice-content">
      <div class="choice-header">
        <div class="logo">方舟鞋城</div>
        <h1>欢迎使用</h1>
        <p class="subtitle">请选择您的登录方式</p>
      </div>

      <div class="choice-cards">
        <div class="choice-card user-card" @click="goToUserLogin">
          <div class="card-icon">
            <el-icon size="48"><User /></el-icon>
          </div>
          <h3>普通用户</h3>
          <p>购物、下单、管理个人中心</p>
          <el-button type="primary" size="large" class="choice-button"> 用户登录 </el-button>
        </div>

        <div class="choice-card admin-card" @click="goToAdminLogin">
          <div class="card-icon">
            <el-icon size="48"><Setting /></el-icon>
          </div>
          <h3>管理员</h3>
          <p>商品管理、订单管理、系统维护</p>
          <el-button type="warning" size="large" class="choice-button"> 管理员登录 </el-button>
        </div>
      </div>

      <div class="choice-footer">
        <p>还没有账号？<router-link to="/auth/register">立即注册</router-link></p>
      </div>
    </div>

    <div class="choice-background" v-if="!isMobile">
      <div class="bg-pattern"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { User, Setting } from '@element-plus/icons-vue'

const router = useRouter()
const isMobile = computed(() => window.innerWidth <= 768)

const goToUserLogin = () => {
  router.push('/auth/login')
}

const goToAdminLogin = () => {
  router.push('/auth/admin-login')
}
</script>

<style scoped lang="scss">
.login-choice-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);

  .choice-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: white;
    max-width: 800px;

    .choice-header {
      text-align: center;
      margin-bottom: 3rem;

      .logo {
        width: 80px;
        height: 80px;
        margin-bottom: 1rem;
        color: #ff5a00;
        font-weight: bold;
        font-size: 1.2rem;
      }

      h1 {
        color: #333;
        margin: 0 0 0.5rem 0;
        font-size: 2.5rem;
        font-weight: 600;
      }

      .subtitle {
        color: #666;
        margin: 0;
        font-size: 1.2rem;
      }
    }

    .choice-cards {
      display: flex;
      gap: 2rem;
      margin-bottom: 2rem;

      .choice-card {
        flex: 1;
        max-width: 300px;
        padding: 2rem;
        border-radius: 16px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .card-icon {
          margin-bottom: 1.5rem;
          color: #ff5a00;
        }

        h3 {
          color: #333;
          margin: 0 0 1rem 0;
          font-size: 1.5rem;
          font-weight: 600;
        }

        p {
          color: #666;
          margin: 0 0 1.5rem 0;
          line-height: 1.6;
        }

        .choice-button {
          width: 100%;
          height: 48px;
          font-size: 1.1rem;
        }
      }

      .user-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-color: #ff5a00;

        &:hover {
          border-color: #ff3a00;
          background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        }

        .card-icon {
          color: #ff5a00;
        }
      }

      .admin-card {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        border-color: #ffc107;

        &:hover {
          border-color: #e0a800;
          background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
        }

        .card-icon {
          color: #e17055;
        }
      }
    }

    .choice-footer {
      text-align: center;

      p {
        color: #666;
        margin: 0;

        a {
          color: #ff5a00;
          text-decoration: none;
          font-weight: 500;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .choice-background {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .bg-pattern {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #ff5a00 0%, #ff0036 100%);
      position: relative;

      &::before {
        content: '👟';
        font-size: 8rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.1;
      }
    }
  }
}

@media (max-width: 768px) {
  .login-choice-container {
    flex-direction: column;

    .choice-content {
      max-width: 100%;
      padding: 1rem;

      .choice-cards {
        flex-direction: column;
        gap: 1rem;

        .choice-card {
          max-width: 100%;
        }
      }
    }

    .choice-background {
      display: none;
    }
  }
}
</style>
